Waldo

Portfolio HTML Website Template for Freelancers & Agencies

Thank you for purchasing this template. :)




Information

This template based on Bootstrap 3 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. More information: https://getbootstrap.com/docs/3.3/


Important!

This template requires that you are familiar with at least HTML and CSS. If you are not familiar with HTML and CSS, I highly recommend that you to hire a specialist. It will save your time and you will get only positive emotions while using this product.

It is also required that you are familiar with Bootstrap 3. If not, then it is strongly recommended that you will familiarize yourself with how the Bootstrap works before you begin to customize this template.

Waldo - is a simple HTML template. HTML is static, this means no dynamic features (no PHP and MySQL). This template is just a good starting point if you want to create your own web site contains mainly the design elements you can use.

* Some parts may not work properly in your local computer. Upload template to your web server in order to function properly.


Some Tips:
Use Firebug or Chrome Developer Tools.

Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

Getting an error message? Someone might have seen it too, try a Google search for a quick fix.

The code is well commented, this makes much easier to customize it. Take the time to explore it, there is much explained.

Files Structure

All template files are located in folder named "UPLOAD". 

+-- waldo /
	+-- assets /
	¦	+-- css /
	¦	¦    +-- helper.css (helper CSS classes)
	¦	¦    +-- theme.css (template master CSS)
	¦	+-- img /
	¦	¦    +-- ...all images used
	¦	+-- js /
	¦	¦    +-- theme.js (template JS)
	¦	+-- vendor /
	¦	¦    +-- bootstrap (all Bootstrap files)
	¦	¦    +-- ...all external scripts/plugins
	¦
	+-- favicon.ico
	+-- mail.php
	+-- index.html
	+-- ...all .html files

Installation

Simply upload all template files (can be found in "UPLOAD" folder) to your server using your favorite FTP client (I recommend FileZilla). Once uploaded, point your browser to your site URL and you are done. No any hocus-pocus. :)

HTML Structure

This template based on Bootstrap 3 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. More information: https://getbootstrap.com/docs/3.3/

 

Basic HTML Markup for Bootstrap grid system:

<div class="row">
     <div class="col-md-8">.col-md-8</div>
     <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4">.col-md-4</div>
     <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
     <div class="col-md-6">.col-md-6</div>
     <div class="col-md-6">.col-md-6</div>
</div>

More information about Bootstrap 3 grid system: https://getbootstrap.com/docs/3.3/css/#grid

 

Basic HTML Markup for template content:

Note: The following example is from simple blank page.

<!-- Begin global search (simple) 
==================================
* Use class "gl-search-dark" to enable global search dark style.
-->
<div id="global-search" class="gl-s gls-simple">
	
	<!-- Begin global search close button -->
	<div class="global-search-close-wrap">
		<a href="#0" class="global-search-close" title="Close">
			<i class="fa fa-close"></i>
		</a>
	</div>
	<!-- End global search close button -->

	<!-- Begin global search form -->
	<form id="global-search-form" method="get" action="search-results-2.html">
		<input type="text" class="form-control" id="global-search-input" name="search" placeholder="Type your keywords...">
	</form>
	<!-- End global search form -->

</div>
<!-- End global search -->


<!-- ===================
///// Begin header /////
==================== -->
<div id="header">

	<!-- Begin logo
	================ -->
	<div id="logo">
		<a href="index.html"><img src="assets/img/logo-dark.png" title="Home" alt="logo"></a>
	</div>
	<!-- End logo -->

	<!-- =================
	///// Begin menu /////
	======================
	* Use class "slide-left", "slide-left-half", "slide-right", "slide-right-half", "slide-top", "slide-bottom" or "zoom-in" to change menu effect.
	-->
	<nav id="menu" class="menu slide-right-half bg-image" style="background-image: url(assets/img/misc/menu-bg-1.jpg); background-position: 50% 50%">

		<!-- Element cover -->
		<div class="cover bg-transparent-5-dark"></div>

		<!-- Begin menu inner -->
		<div id="menu-inner">

			<!-- Begin menu content -->
			<div id="menu-content">

				<!-- Begin menu nav -->
				<div class="menu-nav">
					<ul class="menu-list">
						<li class="has-children">
							<a href="#0" class="sub-menu-trigger">Home</a> 
							<ul class="sub-menu">
								<li><a href="index.html">Home v.1</a></li>
								<li><a href="index-2.html">Home v.2</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="#0" class="sub-menu-trigger">About</a> 
							<ul class="sub-menu">
								<li><a href="about-us.html">About Us</a></li>
								<li><a href="about-me.html">About Me</a></li>
								<li><a href="team.html">The Team</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="#0" class="sub-menu-trigger">Portfolio</a> 
							<ul class="sub-menu">
								<li><a href="portfolio-list.html">Portfolio List v.1</a></li>
								<li><a href="portfolio-list-2.html">Portfolio List v.2</a></li>
								<li><a href="portfolio-single-1.html">Single Item v.1</a></li>
								<li><a href="portfolio-single-2.html">Single Item v.2</a></li>
								<li><a href="portfolio-single-3.html">Single Item v.3</a></li>
								<li><a href="portfolio-single-4.html">Single Item v.4</a></li>
								<li><a href="portfolio-single-5.html">Single Item v.5</a></li>
								<li><a href="portfolio-single-6.html">Single Item v.6</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="#0" class="sub-menu-trigger">Articles</a> 
							<ul class="sub-menu">
								<li><a href="blog-list-1.html">Blog List v.1</a></li>
								<li><a href="blog-list-2.html">Blog List v.2</a></li>
								<li><a href="blog-single.html">Blog Post No Sidebar</a></li>
								<li><a href="blog-single-sidebar-left.html">Blog Post Sidebar Left</a></li>
								<li><a href="blog-single-sidebar-right.html">Blog Post Sidebar Right</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="#0" class="sub-menu-trigger">Gallery</a> 
							<ul class="sub-menu">
								<li><a href="gallery-list.html">Gallery List v.1</a></li>
								<li><a href="gallery-list-2.html">Gallery List v.2</a></li>
								<li><a href="gallery-single.html">Gallery Single v.1</a></li>
								<li><a href="gallery-single-2.html">Gallery Single v.2</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="#0" class="sub-menu-trigger">Shop</a> 
							<ul class="sub-menu">
								<li><a href="shop-list.html">Shop List</a></li>
								<li><a href="shop-single.html">Single Product</a></li>
								<li><a href="shop-cart.html">Shoping Cart</a></li>
								<li><a href="shop-checkout.html">Checkout</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="#0" class="sub-menu-trigger">Contact</a> 
							<ul class="sub-menu">
								<li><a href="contact.html">Contact</a></li>
								<li><a href="contact-simple.html">Contact Simple</a></li>
							</ul>
						</li>
						<li class="has-children active">
							<a href="#0" class="sub-menu-trigger">Pages</a> 
							<ul class="sub-menu">
								<li><a href="page-dummy.html">Dummy Page v.1</a></li>
								<li><a href="page-dummy-2.html">Dummy Page v.2</a></li>
								<li><a href="search-results.html">Search Results v.1</a></li>
								<li><a href="search-results-2.html">Search Results v.2</a></li>
							</ul>
						</li>
					</ul>
				</div>
				<!-- End menu nav -->

			</div>
			<!-- End menu inner -->

			<!-- Begin menu footer -->
			<div class="menu-footer">
				<div class="row">
					<div class="col-sm-6">
						
						<!-- Begin social buttons -->
						<div class="social-buttons">
							<ul>
								<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on facebook"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on twitter"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on dribbble"><i class="fa fa-dribbble"></i></a></li>
								<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on behance"><i class="fa fa-behance"></i></a></li>
								<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on linkedin"><i class="fa fa-linkedin"></i></a></li>
								<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on youtube"><i class="fa fa-youtube"></i></a></li>
							</ul>
						</div>
						<!-- End social buttons -->
						
					</div> <!-- /.col -->

					<div class="col-sm-6 text-right">
						<!-- made with love -->
						<div class="made-with-love hide-from-sm">
							<p>Made With <span class="text-yellow"><i class="fa fa-heart-o"></i></span></p>
						</div>
					</div> <!-- /.col -->
				</div> <!-- /.row -->
			</div>
			<!-- End menu footer -->

		</div>
		<!-- End menu content -->

	</nav>
	<!-- End menu -->

	
	<!-- ==============================
	///// Begin header attriputes /////
	=============================== -->
	<div id="header-attriputes">
		<ul>
			<li>
				<!-- Begin menu trigger -->
				<div id="menu-trigger">
					<div class="mt-inner">
						<div class="menu-str">
							<span class="str-1"></span>
							<span class="str-2"></span>
							<span class="str-3"></span>
						</div>
					</div>
					<div class="mt-text">Menu</div>
				</div>
				<!-- End menu trigger -->
			</li>

			<li>
				<!-- Begin global search trigger -->
				<div id="global-search-trigger">
					<a href="#0" class="gst-icon" title="Search...">
						<i class="fa fa-search"></i>
					</a>
				</div>
				<!-- End global search trigger -->
			</li>
		</ul>

		<ul>
			<li>
				<!-- Begin content share trigger  -->
				<div class="content-share-trigger">
					<a href="#0" class="content-share-icon" title="Share this item" data-toggle="modal" data-target="#modal-19052776">
						<i class="fa fa-share-alt"></i>
					</a>
				</div>
				<!-- End content share trigger -->

				<!-- Begin modal (for content share) 
				=====================================
				* Use class "modal-center" to enable modal center position (for small content only).
				* Use class "modal-left" to enable left sidebar modal.
				* Use class "modal-right" to enable right sidebar modal.
				* Note: Do not use these glasses if you want to use bootstrap default modal.
				-->
				<div id="modal-19052776" class="modal modal-center fade" tabindex="-1" role="dialog" aria-hidden="false">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
								<h4 class="modal-title">Share This Page</h4>
							</div>
							<div class="modal-body">

								<!-- Begin modal share -->
								<div class="modal-share">
									<div class="modal-share-image" style="background-image: url(assets/img/page-header/page-header-bg-21.jpg); background-position: 50% 50%"></div>

									<!-- Begin social buttons -->
									<div class="social-buttons">
										<ul>
											<li><a href="#0" class="btn btn-social-min btn-facebook btn-rounded-full" title="Share on facebook"><i class="fa fa-facebook"></i></a></li>
											<li><a href="#0" class="btn btn-social-min btn-twitter btn-rounded-full" title="Share on twitter"><i class="fa fa-twitter"></i></a></li>
											<li><a href="#0" class="btn btn-social-min btn-google btn-rounded-full" title="Share on google+"><i class="fa fa-google-plus"></i></a></li>
											<li><a href="#0" class="btn btn-social-min btn-pinterest btn-rounded-full" title="Share on pinterest"><i class="fa fa-pinterest"></i></a></li>
											<li><a href="#0" class="btn btn-social-min btn-linkedin btn-rounded-full" title="Share on linkedin"><i class="fa fa-linkedin"></i></a></li>
										</ul>
									</div>
									<!-- End social buttons -->

									<input class="grab-link" type="text" readonly="" value="https://your-site.com/your-page-link/" onclick="this.select()">
								</div>
								<!-- End modal share -->

							</div>
							<div class="modal-footer">
								Copyright 2016 / All rights reserved
							</div>
						</div> <!-- /.modal-content -->
					</div> <!-- /.modal-dialog -->
				</div>
				<!-- End modal -->
			</li>
		</ul>
	</div>
	<!-- End header attriputes -->

</div>
<!-- End header -->


<!-- *************************************
*********** Begin body content *********** 
************************************** -->
<div id="body-content">

	<!-- Begin content container -->
	<div id="content-container">

		<!-- ========================
		///// Begin page header /////
		========================= -->
		<section id="page-header" data-percent-height="0.9">

			<!-- Begin page header image -->
			<div class="page-header-image parallax fade-out-scroll-6 bg-image" style="background-image: url(assets/img/page-header/page-header-bg-21.jpg); background-position: 50% 60%;">

				<!-- Begin page header caption -->
				<div class="page-header-caption">
					<h1 class="page-header-title">Simple<br>Dummy Page</h1>
					<div class="page-header-sub-title-wrap">
						<h2 class="page-header-sub-title">
							Just a dummy page for your content.
						</h2>
					</div>
				</div>
				<!-- End page header caption -->

				<!-- Begin scroll down button -->
				<a href="#page-section" class="scroll-down sm-scroll hide-from-sm" title="Scroll down"></a>
				<!-- End scroll down button -->

			</div>
			<!-- End page header image -->

		</section>
		<!-- End page header -->


		<!-- =========================
		///// Begin page section /////
		========================== -->
		<section id="page-section">
			<div class="container">
				<div class="row">
					<div class="col-md-8 margin-bottom-40">

						Your content here...

						<p>:)</p>

					</div> <!-- /.col -->

					<div class="col-md-4">

						Your content here...

					</div> <!-- /.col -->
				</div> <!-- /.row -->
			</div> <!-- /.container -->

		</section>
		<!-- End page section -->

	</div>
	<!-- End content container -->


	<!-- ===================
	///// Begin footer /////
	========================
	* Use class "fixed-footer" to enable fixed footer (no effect on small devices).
	-->
	<footer id="footer" class="fixed-footer bg-dark text-gray-2">
		<div class="container">
			<div class="row">

				<div class="col-md-4">

					<!-- Begin footer text -->
					<div class="footer-text">
						Your content here...
					</div>
					<!-- End footer text -->

				</div> <!-- /.col -->

				<div class="col-md-4 text-center">

					<!-- Begin footer logo -->
					<div class="footer-logo margin-top-40 margin-bottom-40">
						<a href="index.html"><img src="assets/img/logo-light.png" title="Home" alt="logo"></a>
					</div>
					<!-- End footer logo -->

				</div> <!-- /.col -->

				<div class="col-md-4">

					<!-- Begin social buttons -->
					<div class="social-buttons margin-bottom-15">
						<ul>
							<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on facebook"><i class="fa fa-facebook"></i></a></li>
							<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on twitter"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on dribbble"><i class="fa fa-dribbble"></i></a></li>
							<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on behance"><i class="fa fa-behance"></i></a></li>
							<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on linkedin"><i class="fa fa-linkedin"></i></a></li>
							<li><a href="#" class="btn btn-primary btn-link" target="_blank" title="Follow us on youtube"><i class="fa fa-youtube"></i></a></li>
						</ul>
					</div>
					<!-- End social buttons -->

					<!-- Begin subscribe form -->
					<form id="footer-subscribe-form" class="form-btn-inside">
						<div class="form-group">
							<input type="email" class="form-control no-bg" id="footer-subscribe" name="subscribe" placeholder="Subscribe. Enter your email address..." required="">
							<button class="bg-yellow" type="submit"><i class="fa fa-envelope"></i></button>
						</div>
					</form>
					<!-- End subscribe form -->

					<!-- Begin copyright -->
					<div class="copyright">
						Your content here...
					</div>
					<!-- End copyright -->

				</div> <!-- /.col -->

			</div> <!-- /.row -->
		</div> <!-- /.container -->

		<!-- Scroll to top button -->
		<a href="#body-content" class="scrolltotop sm-scroll"></a>

	</footer>
	<!-- End footer -->


</div>
<!-- End body content -->

Javascript

jQuery - is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. For more information: http://www.jquery.com

Note: The initialization of the elements, libs and features is made by the file named "theme.js" which is located in the folder named "js".

 

Customization & Styles

Helper classes

This template contains some extra prepared helper classes you can use. All helper classes are located in the file "helper.css". You are free to use these classes to customize your web site.


Logo

You can change logo depending your page header background image. If you use light background image, change logo name to "logo-dark.png". If you use dark background image, change logo name to "logo-light.png".

Logo dark:
<!-- Begin logo
================ -->
<div id="logo">
	<a href="index.html"><img src="assets/img/logo-dark.png" title="Home" alt="logo"></a>
</div>
<!-- End logo -->
Logo light:
<!-- Begin logo
================ -->
<div id="logo">
	<a href="index.html"><img src="assets/img/logo-light.png" title="Home" alt="logo"></a>
</div>
<!-- End logo -->

Images

Images used in demo site are licensed to their respective owners and are not included in the download package! Therefore, all images have been replaced with dummy placeholder images. You have to use your own images.

Sliders & Carousels

Content Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel sliders.

Basic HTML Markup for Content Carousel:
<!-- Begin content carousel (http://www.owlcarousel.owlgraphic.com)
====================================================================
* Use class "nav-outside" for outside nav.
* Use class "nav-outside-top" for outside top nav.
* Use class "nav-bottom-right" for bottom right nav.
* Use class "nav-rounded" for rounded nav.
* Use class "dots-outside" for outside dots.
* Use class "dots-left" or "dots-right" to align dots.
* Use class "dots-rounded" for rounded dots.
* Use class "owl-mousewheel" to enable mousewheel support.
* Available carousel data attributes:
		data-items="5".......................(items visible on desktop)
		data-tablet-landscape="4"............(items visible on mobiles)
		data-tablet-portrait="3".............(items visible on mobiles)
		data-mobile-landscape="2"............(items visible on tablets)
		data-mobile-portrait="1".............(items visible on tablets)
		data-loop="true".....................(true/false)
		data-margin="10".....................(space between items)
		data-center="true"...................(true/false)
		data-start-position="0"..............(item start position)
		data-animate-in="fadeIn".............(more animations: http://daneden.github.io/animate.css/)
		data-animate-out="fadeOut"...........(more animations: http://daneden.github.io/animate.css/)
		data-mouse-drag="false"..............(true/false)
		data-touch-drag="false"..............(true/false)
		data-autoheight="true"...............(true/false)
		data-autoplay="true".................(true/false)
		data-autoplay-timeout="5000".........(milliseconds)
		data-autoplay-hover-pause="true".....(true/false)
		data-autoplay-speed="800"............(milliseconds)
		data-drag-end-speed="800"............(milliseconds)
		data-nav="true"......................(true/false)
		data-nav-speed="800".................(milliseconds)
		data-dots="false"....................(true/false)
		data-dots-speed="800"................(milliseconds)
-->
<div class="owl-carousel nav-rounded dots-rounded" data-items="1" data-nav="true">
 
	<!-- Begin carousel item -->
	<div class="cc-item">
		your content here...
	</div>
	<!-- End carousel item -->	
 
	<!-- Begin carousel item -->
	<div class="cc-item">
		your content here...
	</div>
	<!-- End carousel item -->	
 
	<!-- Begin carousel item -->
	<div class="cc-item">
		your content here...
	</div>
	<!-- End carousel item -->	
 
</div>
<!-- End content carousel -->

Note: Content Carousel based on popular OWL Carousel. More information about OWL Carousel: http://www.owlcarousel.owlgraphic.com

Video background

Basic HTML Markup for video background:

An open source jQuery component to easily build your custom Youtube player or to use a Youtube video as background for your page.

<!-- Begin YTPlayer (Youtube video background)
===============================================
* NOTES: Replace videoURL with your own (videoURL:'your-youtube-video-URL'). 
* Do not forget to add your background image for mobile devices (because the video background doesn't work on mobile devices).
* YTPlayer may not work in the local computer. It works properly only if used under a web server.
* More info about YTPlayer: https://github.com/pupunzi/jquery.mb.YTPlayer 
-->
<div class="youtube-bg-wrap ytp-full"> <!-- Class "ytp-full" is for full size. -->
	<div class="youtube-bg" 
		style="background-image: url(assets/img/video-bg/video-bg-1.jpg); background-position: 50% 20%;"
		data-property="{
			videoURL: 'https://www.youtube.com/watch?v=ZFm-Yy13keI',
			containment: 'self',
			quality: 'default',
			startAt: 0,
			stopAt: 0,
			autoPlay: true,
			loop: true,
			mute: true,
			showControls: false,
			showYTLogo: false,
			realfullscreen: true,
			addRaster: false,
			optimizeDisplay: true,
			stopMovieOnBlur: true
		}">

	</div> <!-- /.youtube-bg -->
</div>
<!-- End YTPlayer (Youtube video background) -->

More information about YTPlayer: https://github.com/pupunzi/jquery.mb.YTPlayer

Contact Form

This template includes a working contact form. Proceed as follows in order to configure it.

Open file "contact.html". Find and configure the following code:

<!-- Begin hidden required fields (https://github.com/agragregra/uniMail) -->
<input type="hidden" name="project_name" value="yourwebsiteaddress.com"> <!-- Change value to your site name -->
<input type="hidden" name="admin_email" value="your@email.com"> <!-- Change value to your valid email address (where a message will be sent) -->
<input type="hidden" name="form_subject" value="Message from yourwebsiteaddress.com"> <!-- Change value to your own message subject -->
<!-- End Hidden Required Fields -->

More information about uniMail: https://github.com/agragregra/uniMail

Important!

* Do not remove the file "mail.php". Otherwise, the contact form is not working!
* Make sure that your hosting supports email functsion!

Icons

Font Awesome - gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

HTML Markup:

<i class="fa fa-search"></i>
<i class="fa fa-user"></i>
<i class="fa fa-folder-open"></i>
...

For more information, please visit this site: http://fontawesome.io

Fonts

Fonts in use:

Google Fonts:

Please take a look in the <head> part of the website and you will find this tag:

<!-- Google font (https://www.google.com/fonts) -->
<link href='https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.

Source & Credits

Fonts:

Scripts:

Images:

Notes: Images used in demo site are licensed to their respective owners and are not included in the download package! Therefore, all images have been replaced with dummy placeholder images. You have to use your own images.

Support Policy

Support is offered to verified customers only! As author of this template I provide support only for my items which I created. This means that I will respond to questions which are directly and strictly related to this product (errors and bugs reports, also pre-sale questions).

Support for my items includes:

  • Responding to questions or problems regarding the item and its features
  • Customization services - If you want customizations to your website then please do not hesitate to contact me, we can discuss it.
    * Note that this service will charge you extra!

Item support does not include:

  • Support for third party software, scripts and plug-ins
  • Teaching you HTML, CSS, JavaScript, jQuery
  • Resolving individual server issues, hosting problems, etc.

How do contact for support?

If you have any questions, please feel free to contact me.